<template>
  <div class="app-container">
    <el-form ref="mainRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="组件编码" prop="componentCode">
        <el-input v-model="form.componentCode" disabled />
      </el-form-item>
      <el-form-item label="组件名" prop="componentName">
        <el-input v-model="form.componentName" placeholder="请输入组件名" />
      </el-form-item>
      <el-form-item label="组件图标" prop="componentIconUrl">
        <ImageUpload
            v-model="imageList"
            :limit="1"
            :fileSize="2"
            :isShowTip="false"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="排序号" prop="sortNumber">
        <el-input v-model="form.sortNumber" placeholder="请输入排序号" />
      </el-form-item>
      <el-form-item label="提交说明" prop="commitMessage">
        <el-input v-model="form.commitMessage" placeholder="请输入提交说明" />
      </el-form-item>
      <el-form-item label="返回值类型" prop="returnType">

        <el-select
            v-model="form.returnType"
            placeholder="请选择返回值类型"
            clearable
            style="width: 240px"
        >
          <el-option
              v-for="item in dataTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
        <el-button type="primary" @click="updateMain">确 定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,  ref, watch,onMounted} from 'vue';
import { listData } from "@/api/system/dict/data";
const { proxy } = getCurrentInstance();
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const imageList = ref([])
const dataTypeList = ref([])
const queryDictParams= ref( {
  pageNum: 1,
      pageSize: 10,
      dictType: 'business_data_type',
      dictLabel: undefined,
      status: undefined
})

// 初始化所有可能字段
const form = ref({
})
// 添加表单验证规则
const rules = ref({
  componentName: [
    { required: true, message: '请输入组件名', trigger: 'blur' }
  ],
  componentIconUrl: [
    { required: true, message: '请上传组件图标', trigger: 'change' }
  ],
  returnType: [
    { required: true, message: '请输入返回值类型', trigger: 'blur' }
  ]
});
function updateMain() {
  if(imageList.value.length>0) {
    form.value.componentIconUrl = imageList.value;
    //替换掉[,双引号,]为空串
    form.value.componentIconUrl = JSON.stringify(form.value.componentIconUrl).replace(/\[|"|\]/g,"");
  }
  emit('update:modelValue', form.value)
}

watch(() => props.modelValue, () => {
      if(props.modelValue.className!="") {
        // 直接赋值新值，保持响应性
        Object.assign(form.value, props.modelValue || {})
          if(form.value.componentIconUrl) {
            //如果form.value.componentIconUrl不包含[
            if(form.value.componentIconUrl.indexOf("[")==-1) {
              imageList.value = [form.value.componentIconUrl];
            }else{
              imageList.value = JSON.parse(form.value.componentIconUrl)
            }
          }else{
            imageList.value = []
          }
          console.log("tenantfunctionmain watch:", JSON.stringify(form.value))
      }else{
        console.log("newVal.className==''")
      }
    },{ deep: true, immediate: true }
);
onMounted(() => {
  getDataTypeList();
})
/** 查询DataType字典数据列表 */
function getDataTypeList() {
  listData(queryDictParams.value).then(response => {
    dataTypeList.value = response.rows;
  });
}
</script>
